<template>
    <div style="padding: 0 10%">
      <div class="bg-white p-20">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item" :name="index">
            <div>
              <slot name="content"></slot>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  
  </template>
  
  <script>
  export default {
    name: 'Content',
    data() {
      return {
        activeName: 0,
        tabs: ['全部', '梅花', '百合', '玫瑰', '牡丹花', '康乃馨', '月季'],
        value:''
      }
    },
    methods: {
     async handleClick(tab) {
        this.value = tab.props.label
      }
    },
    searchEvent(data) {
      this.$emit('search', data)
      console.log(data)
    },
  }
  </script>
  
  <style scoped lang="scss">
  .demo-tabs {
    width: 100%;
  }
  </style>
  